<template>
    <div style="position:fixed;left:0;bottom:0;width:100%;" class="bg-gray-100">
        <div class="d-flex align-items-center justify-content-between px-4 py-2">
            <el-link :underline="false">
                <div class="text-center" v-on:click="btnAppMenuClick('index')">
                    <i class="fs-3" :class="appMenuActive==='index'?'bi bi-house-heart-fill text-primary fw-bold':'bi bi-house text-black fw-light'"></i>
                    <div :class="appMenuActive==='index'?'text-primary fw-bold':'text-black fw-light'">
                        首 页
                    </div>
                </div>
            </el-link>
            <el-link :underline="false">
                <div class="text-center" v-on:click="btnAppMenuClick('studyPlan')">
                    <i class="fs-3" :class="appMenuActive==='studyPlan'?'bi bi-star-fill text-primary fw-bold':'bi bi-star text-black fw-light'"></i>
                    <div :class="appMenuActive==='studyPlan'?'text-primary fw-bold':'text-black fw-light'">
                        培 训
                    </div>
                </div>
            </el-link>
            <el-link :underline="false">
                <div class="text-center" v-on:click="btnAppMenuClick('studyCourse')">
                    <i class="fs-3" :class="appMenuActive==='studyCourse'?'bi bi-clipboard-check-fill text-primary fw-bold':'bi bi-clipboard-check text-black fw-light'"></i>
                    <div :class="appMenuActive==='studyCourse'?'text-primary fw-bold':'text-black fw-light'">
                        课 程
                    </div>
                </div>
            </el-link>
            <el-link :underline="false">
                <div class="text-center" v-on:click="btnAppMenuClick('exam')">
                    <i class="fs-3 bi bi-ui-checks" :class="appMenuActive==='exam'?'text-primary fw-bold':'text-black fw-light'"></i>
                    <div :class="appMenuActive==='exam'?'text-primary fw-bold':'text-black fw-light'">
                        考 试
                    </div>
                </div>
            </el-link>
            <el-link :underline="false">
                <div class="text-center" v-on:click="btnAppMenuClick('mine')">
                    <i class="fs-3" :class="appMenuActive==='mine'?'bi bi-person-fill text-primary fw-bold':'bi bi-person text-black fw-light'"></i>
                    <div :class="appMenuActive==='mine'?'text-primary fw-bold':'text-black fw-light'">
                        我 的
                    </div>
                </div>
            </el-link>
        </div>
    </div>
</template>